var curPageIdx = 4;
 // header跳转的页面
    var headerUrls = ['../index/index.html','../arena/arena.html','../famous_part/famous-part.html','../class/classDetail.html','../my/Record.html','../search/Search.html'];
var curMatchJson = [
  {'vedio': '../image/history/record1.png', 'title': '穆桂英挂帅',  'mark': '../image/history/btn.png'},
	{'vedio': '../image/history/record2.png', 'title': '【鱼嘴滑舌】第89期：无畏战车狂铁，极限反击以一敌五', 'time': '剩余时长：', 'mark': '../image/history/btn.png', 'line': '../image/history/line.png'},
	{'vedio': '../image/history/record2.png', 'title': '【鱼嘴滑舌】第89期：无畏战车狂铁，极限反击以一敌五', 'time': '剩余时长：', 'mark': '../image/history/btn.png', 'line': '../image/history/line.png'},
	{'vedio': '../image/history/record1.png', 'title': '【鱼嘴滑舌】第89期：无畏战车狂铁，极限反击以一敌五', 'time': '剩余时长：', 'mark': '../image/history/btn.png', 'line': '../image/history/line.png'},
	{'vedio': '../image/history/record1.png', 'title': '【鱼嘴滑舌】第89期：无畏战车狂铁，极限反击以一敌五', 'time': '剩余时长：', 'mark': '../image/history/btn.png', 'line': '../image/history/line.png'},
  {'vedio': '../image/history/record2.png', 'title': '【鱼嘴滑舌】第89期：无畏战车狂铁，极限反击以一敌五', 'time': '剩余时长：', 'mark': '../image/history/btn.png', 'line': '../image/history/line.png'},
  {'vedio': '../image/history/record2.png', 'title': '【鱼嘴滑舌】第89期：无畏战车狂铁，极限反击以一敌五', 'time': '剩余时长：', 'mark': '../image/history/btn.png', 'line': '../image/history/line.png'},
  {'vedio': '../image/history/record1.png', 'title': '【鱼嘴滑舌】第89期：无畏战车狂铁，极限反击以一敌五', 'time': '剩余时长：', 'mark': '../image/history/btn.png', 'line': '../image/history/line.png'},
  {'vedio': '../image/history/record1.png', 'title': '【鱼嘴滑舌】第89期：无畏战车狂铁，极限反击以一敌五', 'time': '剩余时长：', 'mark': '../image/history/btn.png', 'line': '../image/history/line.png'},
  {'vedio': '../image/history/record2.png', 'title': '【鱼嘴滑舌】第89期：无畏战车狂铁，极限反击以一敌五', 'time': '剩余时长：', 'mark': '../image/history/btn.png', 'line': '../image/history/line.png'},

  {'vedio': '../image/history/record1.png', 'title': '【鱼嘴滑舌】第89期：无畏战车狂铁，极限反击以一敌五', 'time': '剩余时长：', 'mark': '../image/history/btn.png', 'line': '../image/history/line.png'},
  {'vedio': '../image/history/record1.png', 'title': '【鱼嘴滑舌】第89期：无畏战车狂铁，极限反击以一敌五', 'time': '剩余时长：', 'mark': '../image/history/btn.png', 'line': '../image/history/line.png'},
  {'vedio': '../image/history/record1.png', 'title': '【鱼嘴滑舌】第89期：无畏战车狂铁，极限反击以一敌五', 'time': '剩余时长：', 'mark': '../image/history/btn.png', 'line': '../image/history/line.png'},
  {'vedio': '../image/history/record1.png', 'title': '【鱼嘴滑舌】第89期：无畏战车狂铁，极限反击以一敌五', 'time': '剩余时长：', 'mark': '../image/history/btn.png', 'line': '../image/history/line.png'},
  {'vedio': '../image/history/record1.png', 'title': '【鱼嘴滑舌】第89期：无畏战车狂铁，极限反击以一敌五', 'time': '剩余时长：', 'mark': '../image/history/btn.png', 'line': '../image/history/line.png'}
];
  
var inners1 = '';
var inners2 = '';

for(var i = 0; i < curMatchJson.length; i++){
  if (i % 2 == 0) {
    inners1 += '<div id="vedioContent_'+(i+1)+'" ican="true" class="swiper" style="background-image: url('+curMatchJson[i]['vedio']+');">\
                    <div class="cover">\
                      <div class="linet">\
                        <div class="mark" style="background-image: url('+curMatchJson[i]['mark']+');"></div>\
                      </div>\
                      <div class="word">'+curMatchJson[i]['title']+'</div>\
                    </div>\
                    </div>';
  }else{
    inners2 += '<div id="vedioContent_'+(i+1)+'" ican="true" class="swiper" style="background-image: url('+curMatchJson[i]['vedio']+');">\
                    <div class="cover">\
                      <div class="linet">\
                        <div class="mark" style="background-image: url('+curMatchJson[i]['mark']+');"></div>\
                      </div>\
                      <div class="word">'+curMatchJson[i]['title']+'</div>\
                    </div>\
                    </div>';
  }
}
document.getElementById('matchFirRow').innerHTML = inners1 + inners2;
// document.getElementById('matchSecRow').innerHTML = inners2;


var scw = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
//图片间距30px
var curSpace = 30 * scw / 1920;

var containerWidth = function() {

 //第一行图片的个数
  var num1 = '';
  var num2 = '';
  if(curMatchJson.length % 2 == 0){
    num1 = curMatchJson.length / 2;
    num2 = curMatchJson.length / 2;
  }else{
    num1 = curMatchJson.length / 2 + 1;
    num2 = curMatchJson.length / 2;
  }
  //第一行图片的总长度
  getObjById('matchFirRow').style.width = (num1 * 442)/18 + 'em';
  getObjById('matchSecRow').style.width = (num1 * 442)/18 + 'em';
};
containerWidth();

//curSelectedIdx 当前焦点id
// 移动的个数
var moveNum = 0;
function scroll(curSelectedIdx,moveNum,direction){
  var dire = direction;
  removeClass(getObjById('vedioContent_'+curSelectedIdx),'spArea_active');
  if (dire == 'l') {
    addClass(getObjById('vedioContent_'+(curSelectedIdx-2)),'spArea_active');
  }else if(dire == 'r'){
    if(getObjById('vedioContent_'+(curSelectedIdx+2))){
      addClass(getObjById('vedioContent_'+(curSelectedIdx+2)),'spArea_active');
    }else{
      addClass(getObjById('vedioContent_'+curSelectedIdx),'spArea_active');
    }
  }
  // 一行8个
  getObjById('matchFirRow').style.marginLeft = -(24.556*moveNum) + 'em';
  // getObjById('matchSecRow').style.marginLeft = -(24.556*moveNum) + 'em';
};

// 设置初始状态
document.onkeydown = focusEvent;
function focusEvent(e){
  // 获取 收藏专题 页 中的当前焦点的id
  var curActiveMatch = document.getElementsByClassName('spArea_active');
  var curSelectedIdx;
  if (curActiveMatch.length != 0) {
    curSelectedIdx = parseInt(curActiveMatch[0].id.replace('vedioContent_',''));   
  }

  // 获取header中的li的当前焦点的index
var curActiveLi = document.getElementsByClassName('header_selected_li');
var curLiIdx = parseInt(curActiveLi[0].id.replace('header_li_',''));

  e = e || window.event; //这一行及下一行是为兼容IE8及以下版本
  var curWhichKey = e.which;
  
  
  switch(curWhichKey){
    /*case 13: // 回车/OK
      // 焦点在赛事时
      if (curActiveMatch.length != 0) {
      }else{ // 焦点在header时
        if (curLiIdx != 2) {
          window.location.href = headerUrls[curLiIdx - 1];
        }
      }
      break;*/
    case 27: // ESC
        window.history.back();
        return false;
        break;
    case 37: // 左
      if (curActiveMatch.length == 0) { // 焦点在header
        if (curLiIdx != 0) {
        	console.log(curLiIdx)
//        removeClass(getObjById('header_li_'+curLiIdx),'selected');
//        addClass(getObjById('header_li_'+(curLiIdx-1)),'selected');
 window.location.href = headerUrls[curPageIdx - 1];
        }
      }else{  // 焦点在播放记录页
        if (curMatchJson.length > 2) {
        if (curSelectedIdx !== 1 && curSelectedIdx !== 2) {
          // if (curSelectedIdx >= 7 || curSelectedIdx >= 8) {
          //    moveNum -=1 ;
          //   scroll(curSelectedIdx,moveNum,'l');
          // }else{
          //   removeClass(getObjById('vedioContent_'+curSelectedIdx),'spArea_active');
          //   addClass(getObjById('vedioContent_'+(curSelectedIdx-2)),'spArea_active');
          // }
            if (moveNum>0) {
              moveNum -=1;
              scroll(curSelectedIdx,moveNum,'l');
            }else{
              removeClass(getObjById('vedioContent_'+curSelectedIdx),'spArea_active');
              addClass(getObjById('vedioContent_'+(curSelectedIdx-2)),'spArea_active');
            }
        }
        }
       
      }
      break;

    case 38: // 上
      if (curActiveMatch.length == 0) {
      }else{
        // 焦点在第二行
        if (curSelectedIdx % 2 == 0) {
          removeClass(getObjById('vedioContent_'+curSelectedIdx),'spArea_active');
          addClass(getObjById('vedioContent_'+(curSelectedIdx-1)),'spArea_active');
        }else{ // 焦点在第一行
          removeClass(getObjById('vedioContent_'+curSelectedIdx),'spArea_active');
          addClass(getObjById('header_li_'+(curLiIdx)),'title_only_foucused_li');
          getObjById('matchFirRow').style.marginLeft = 0 + 'em';
          getObjById('matchSecRow').style.marginLeft = 0 + 'em';
          moveNum = 0;
        }

      }
      break;

    case 39: // 右
     
      if (curActiveMatch.length == 0) { // 焦点在header
        if (curLiIdx == 0) {
          window.location.href = "Collectitem.html";
          removeClass(getObjById('header_li_'+curLiIdx),'selected');
          addClass(getObjById('header_li_'+(curLiIdx+1)),'selected');
          removeClass(getObjById('header_li_'+curLiIdx),'title_only_foucused_li');
          addClass(getObjById('header_li_'+(curLiIdx+1)),'title_only_foucused_li');
//        window.location.href = headerUrls[curPageIdx + 1];
        }
         window.location.href = '../search/Search.html';
      }else{
        var row1max = curMatchJson.length % 2 == 0 ? (curMatchJson.length -1) : curMatchJson.length;
        var row2max = curMatchJson.length % 2 == 0 ? curMatchJson.length : (curMatchJson.length -1);
        if (curSelectedIdx <= row1max && curSelectedIdx <= row2max) {
          if (curSelectedIdx >= 7 || curSelectedIdx >= 8) {
            if(moveNum < (Math.ceil(curMatchJson.length/2))-4){
              moveNum +=1 ;
            }
            scroll(curSelectedIdx,moveNum,'r');
          }else{
            if(getObjById('vedioContent_'+(curSelectedIdx+2))){
              removeClass(getObjById('vedioContent_'+curSelectedIdx),'spArea_active');
              addClass(getObjById('vedioContent_'+(curSelectedIdx+2)),'spArea_active');
            }
          }
        }
      }
      break;
    
    case 40: // 下
      // 首次进入
      if (curActiveMatch.length == 0) {
        addClass(getObjById('vedioContent_1'),'spArea_active');
        removeClass(getObjById('header_li_'+curLiIdx),'title_only_foucused_li');
      }else{
         // 判断是第一行还是第二行
        if (curSelectedIdx % 2 != 0) {
          removeClass(getObjById('vedioContent_'+curSelectedIdx),'spArea_active');
          if (getObjById('vedioContent_'+(curSelectedIdx+1))) {
            addClass(getObjById('vedioContent_'+(curSelectedIdx+1)),'spArea_active');
          }else{
            // moveNum -=1 ;
            if(curSelectedIdx==1){
              addClass(getObjById('vedioContent_'+(curSelectedIdx)),'spArea_active');
            }else{
              addClass(getObjById('vedioContent_'+(curSelectedIdx-1)),'spArea_active');
            }
          } 
        }
      }
      break;
  }
}